<template>
  <div>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#82A3C1', color: '#1A1C1E', padding:'0',textAlign:'center'}"
      :header-row-style="{ height:'25px'}"
      :cell-class-name="columnStyle"
      :row-style="{ height: '25px' }"
      :cell-style="{ padding: '0px',textAlign:'center'}"
      border
    >
      <el-table-column prop="date" label></el-table-column>
      <el-table-column prop="Monday" label="周一"></el-table-column>
      <el-table-column prop="Tuesday" label="周二"></el-table-column>
      <el-table-column prop="Wednesday" label="周三"></el-table-column>
      <el-table-column prop="Thursday" label="周四"></el-table-column>
      <el-table-column prop="Friday" label="周五"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courseInfo: []
    };
  },
  computed: {
    tableData() {
      var temp = [
        {
          date: "第一节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
        },
        {
          date: "第二节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
        },
        {
          date: "第三节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
        },
        {
          date: "第四节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
        },
        {
          date: "第五节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
        },
        {
          date: "第六节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
        },
        {
          date: "第七节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
        },
        {
          date: "第八节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
        },
      ];
      for (let index in this.courseInfo) {
        var item = this.courseInfo[index];
        for (let index2 in item.sections) {
          let item2 = item.sections[index2];
          let week = Math.floor((item2.periodId - 1) / 8 + 1);
          let section = (item2.periodId - 1) % 8;
          switch (week) {
            case 1:
              temp[section].Monday = item.title.slice(0, 5) + "...";
              break;
            case 2:
              temp[section].Tuesday = item.title.slice(0, 5) + "...";
              break;
            case 3:
              temp[section].Wednesday = item.title.slice(0, 5) + "...";
              break;
            case 4:
              temp[section].Thursday = item.title.slice(0, 5) + "...";
              break;
            case 5:
              temp[section].Friday = item.title.slice(0, 5) + "...";
              break;
            default:
              console.log("课程表出错");
          }
        }
      }
      return temp;
    },
  },
  methods: {
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        //第三第四列的背景色就改变了2和3都是列数的下标
        return "addClass";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  width: 675px !important;
  height: 225px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>

<style>
.addClass {
  background: #dce1e6;
  color: #1a1c1e;
  font-weight: 500;
}
</style>
